<template>
	<div class="signin">
		<div class="signin_tip" v-if="isError">{{errorMsg}}</div>
		<div class="signin_main" v-if="isSignIn==='SIGNIN'">
			<h1>登录账号</h1>
			<div class="signin_main_form">
				<form id="signin">
					<label>用户名或email<input type="text" placeholder="" value="" name="login" /></label>
					<label>密码<a href="javascript:;" @click="forgotPasswordClickHandle">找回密码</a>
						<input type="password" placeholder="" value="" name="password" /></label>
					<label>
						<button type="button" :disabled="isDisabled" @click="signinSubmitHandle">登 录</button>
						<button type="button" @click="toSignupClickHandle" class="cancel">加入我们</button>
					</label>
				</form>
			</div>
		</div>
		<div class="signin_main" v-if="isSignIn==='SIGNUP'">
			<h1>加入我们</h1>
			<div class="signin_main_form">
				<form id="signup">
					<label>用户名<i>*</i><input type="text" placeholder="" value="" name="username" /></label>
					<label>Email<i>*</i>
						<input type="text" placeholder="" value="" name="email" /></label>
					<label>密码<i>*</i>
						<input type="password" placeholder="" value="" name="password" /></label>
					<label>
						<button type="button" @click="signupClickHandle" :disabled="isDisabled">注 册</button>
						<button type="button" @click="toSigninSubmitHandle" class="cancel">登录已有账户</button>
					</label>
				</form>
			</div>
		</div>
		<div class="signin_main" v-if="isSignIn==='FORGOTPASSWORD'">
			<div v-if="forgotType === 1">
				<h1>找回密码</h1>
				<div class="signin_main_form">
					<form id="forgotpassword">
						<label>Email<i>*</i>
							<input type="text" placeholder="" value="" name="email" /></label>
						<label>
							<button type="button" @click="forgotPasswordNextOneHandle" :disabled="isDisabled">下一步</button>
							<button type="button" @click="toSigninSubmitHandle" class="cancel">登录已有账户</button>
						</label>
					</form>
				</div>
			</div>
			<div v-if="forgotType === 2">
				<h1>密码重置确认发送</h1>
				<div class="signin_main_form">
					<form>
						<p>我们已经给您发了一封电子邮件，其中包含一个链接，将允许您重置您的密码。如果邮件在几分钟内没有出现，请检查您的垃圾邮件文件夹。</p>
						<label>
							<button type="button" @click="returnSigninHandle" class="cancel">返回并登录</button>
						</label>
					</form>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import Axios from 'axios';
	import qs from 'Qs';
	const Cookie = window.Cookie();
	export default {
		name: 'signin',
		props:[],
		data: function(){
			return {
				isSignIn: "SIGNIN",
				forgotType: 1,
				isError:false,
				errorMsg:'',
				isDisabled: false
			}
		},
		mounted:function(){
			this.$emit("setDataObject", {type:"signin", title:"登录", showTip:false})
		},
		watch:{
			isSignIn:function(val){
				this.$set(this, "isError", false);
				this.$set(this, "isDisabled", false);
			}
		},
		methods:{
			errorTip:function(msg){
				this.$set(this, "isError", true);
				this.$set(this, "errorMsg", msg);
				this.$set(this, "isDisabled", false);
			},
			successTip:function(path){
				this.$router.push(path);
				this.$set(this, "isDisabled", false);
			},
			forgotPasswordClickHandle(e){
				this.$set(this, "isSignIn", "FORGOTPASSWORD")
			},
			forgotPasswordNextOneHandle(e){
				const that = this;
				this.$nextTick(() => {
					that.$set(that, "isDisabled", true);
					const form = document.getElementById("forgotpassword");
					const formemail = form.email.value.replace(/$\s+|\s+$/gim, '');
					if (formemail === ""){
						that.$set(that, "isError", true);
						that.$set(that, "errorMsg", 'email no empty.');
						that.$set(that, "isDisabled", false);
						return;
					}
					Axios.post(that.$store.state.api.postForgotPassword, qs.stringify({
						email:formemail
					})).then((res) => {
						if (res.data.status === 1){
							that.$set(that, "isError", false);
							that.$set(that, "forgotType", 2);
						}else{
							that.errorTip(res.data.msg);
						}
					}).catch((err) => {
						console.log(err)
						that.errorTip(error.message);
					})
				});
			},
			returnSigninHandle(e){
				this.$set(this, "isSignIn", "SIGNIN")
				this.$set(this, "forgotType", 1)
			},
			signinSubmitHandle(e){
				const that = this;
				this.$nextTick(() => {
					that.$set(that, "isDisabled", true);
					const form = document.getElementById("signin");
					const formlogin = form.login.value.replace(/$\s+|\s+$/gim, ''),
						formpassword = form.password.value.replace(/$\s+|\s+$/gim, '');

					if (formlogin === ""||formpassword === ""){
						that.$set(that, "isError", true);
						that.$set(that, "errorMsg", 'email or password no empty.');
						that.$set(that, "isDisabled", false);
						return;
					}
					Axios.post(that.$store.state.api.postSignin, qs.stringify({
						user:formlogin,
						password:formpassword
					})).then((res) => {
						console.log(res)
						if (res.data.status === 1){
							Cookie.set("userToken", encodeURIComponent("id=" + res.data.data[0].id + ",name=" + res.data.data[0].name + ",email=" + res.data.data[0].email), "1d", "/", ".iliulan.com")
							that.successTip('/');
						}else{
							that.errorTip(res.data.msg);
						}
					}).catch((err) => {
						console.log(err)
						that.errorTip(error.message);
					})
				})
			},
			signupClickHandle(e){
				const that = this;
				this.$nextTick(() => {
					that.$set(that, "isDisabled", true);
					const form = document.getElementById("signup");
					const formusername = form.username.value.replace(/$\s+|\s+$/gim, ''),
						formemail = form.email.value.replace(/$\s+|\s+$/gim, ''),
						formpassword = form.password.value.replace(/$\s+|\s+$/gim, '');

					if (formusername === ""||formemail === '' ||formpassword === ""){
						that.$set(that, "isError", true);
						that.$set(that, "errorMsg", 'username or email or password no empty.');
						that.$set(that, "isDisabled", false);
						return;
					}
					Axios.post(that.$store.state.api.postSignUp, qs.stringify({
						user:formusername,
						email:formemail,
						password:formpassword
					})).then((res) => {
						console.log(res)
						if (res.data.status === 1){
							that.successTip('/');
						}else{
							that.errorTip(res.data.msg);
						}
					}).catch((err) => {
						console.log(err)
						that.errorTip(err.message);
					})
				});
			},
			toSignupClickHandle(e){
				this.$set(this, "isSignIn", "SIGNUP")
			},
			toSigninSubmitHandle(e){
				this.$set(this, "isSignIn", "SIGNIN")
			}
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.signin{
		background-color: #fff;
		margin:70/@base 0 0;
		padding:20/@base;
		.signin_tip{
			background-color: #ffdce0;
			color:#86181d;
			text-align: center;
			padding:10/@base 20/@base;
			margin:0 0 20/@base 0;
		}
		.signin_main{
			border:1/@base solid #ccc;
			border-radius: 5/@base;
			margin:0 auto;
			overflow: hidden;
			h1{
				font-size:20/@base;
				padding:20/@base;
				background-color: #f6f8fa;
				border-bottom: 1/@base solid #ccc;
			}
			.signin_main_form{
				padding: 20/@base;
				form{
					p{
						padding:20/@base 0;
						font-size: 20/@base;
					}
					label{
						display: block;
						margin:10/@base 0;
						font-size: 20/@base;
						input{
							display: block;
							padding:12/@base 16/@base;
							border-radius: 5/@base;
							border:1/@base solid #ccc;
							width:100%;
							box-sizing: border-box;
							line-height: 40/@base;
							margin:20/@base 0;
							box-shadow: inset 0 1px 2px rgba(27,31,35,.075);
						}
						a{
							color:#0366d6;
							text-decoration: none;
							margin:0 10/@base;
						}
						button{
							width:100%;
							text-align: center;
							padding:12/@base 16/@base;
							line-height: 40/@base;
							border-radius: 5/@base;
							border:1/@base solid #ccc;
							background-color: #f6f8fa;
							margin:10/@base 0;
							&.cancel{
								background-color: #b0e0e6;
								color:#333;
							}
						}
						i{
							color:#ff0000;
							margin:0 10/@base;
						}
					}
				}
			}
		}
	}
</style>